<template>
  <div>
    <div>
      <textarea v-model='content' style=" width:100%;height: 300px"></textarea>
    </div>
    <div style="display:inline-block;width:50%;">
      <div id="show-content"></div>
    </div>
  </div>
</template>
<script>
export default {

  data() {
    return {
      'content': '',
      'converter': null
    }
  },
  watch: {
    'content': 'contentChanged'
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const showdown = require('showdown');
      this.converter = new showdown.Converter();
    },
    contentChanged() {
      document.getElementById('show-content').innerHTML = this.converter.makeHtml(this.content);
    }
  }
}
</script>
<style>
#show-content {
  padding: 25px;
}
</style>